<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <style>
        .main{
            padding-top:40px;
            font-size:100px;
            text-align: center;
            min-height: 500px;
        }
        .header{
            padding :20px;
            padding-left: 150px;
            padding-right: 150px;
            background-color:teal;
        }
    </style>
</head>
<body>
<div id="app">
    <my_header @item-click="cpnClick"></my_header>
    <div class="main" >
        {{message}}
    </div>
</div>
</body>
<template id="my-header">
    <div class='header'>
        <input type="text" v-model="cname" v-if="flag">
        <div v-if="!flag" style="display: inline-block">欢迎你！{{cname}}</div>
        <button @Click="bthClick">{{hint}}</button>
    </div>
</template>
<script src="vue.js"></script>
<script>
    let my_header = {
        template:`#my-header`,
        data() {
            return {
                cname: '',
                hint:'登陆',
                flag:true,
            }
        },
        methods:{
            bthClick() {
                if (this.cname != '') {
                    if (this.hint == '退出登录') this.cname = '';
                    if (this.flag == 1)
                    this.hint = ['退出登录','登陆'][0];
                    else this.hint = ['退出登录','登陆'][1];
                    this.flag = !this.flag;
                    let result = {
                        name:this.cname,
                        flag:this.flag
                    }
                    this.$emit('item-click',result);
                } else {
                    alert("请输入用户");
                }
            }
        }
    }
    let app = new Vue({
        el:"#app",
        data:{
            name:'',
            message:'尚未登录'
        },
        components: {
            my_header
        },
        methods: {
            cpnClick(result){
                if (result.flag) this.message = '尚未登录';
                else {
                    this.name = result.name;
                    this.message = '当前登录的是'+this.name;
                }
            }
        }
    })
</script>
</html>